<template>
  <div class="app-container monthlyBudget">
    <el-form :model="selectForm" ref="queryForm" :inline="true" >
      <el-form-item label="预算月份">
        <el-date-picker
          v-model="selectForm.mouth"
          type="month"
          size="small"
          format="yyyy-MM"
          @change="getListmonth"
          value-format="yyyy-MM"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="战线分类">
        <el-select v-model="selectForm.depId" placeholder="请选择" size="small"  @change="getListzx">
          <el-option
            v-for="item in classify"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="费用来源">
        <el-select v-model="selectForm.cpName" placeholder="请选择" size="small"  @change="getList">
          <el-option
            v-for="item in cpNameArr"
            :key="item.cpName"
            :label="item.cpName"
            :value="item.cpName">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="费用类别">
        <el-select v-model="selectForm.contractingType" placeholder="请选择" size="small"  @change="getList">
          <el-option
            v-for="item in fylbList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="审核状态">
        <el-select v-model="selectForm.auditSteps" placeholder="请选择" size="small"  @change="getList">
          <el-option
            v-for="item in shztList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item> -->
    </el-form>

    <el-table v-loading="loading" :data="listData" border>
      <el-table-column align="center" label="单位" prop="depName"/>
      <!-- <el-table-column align="center" label="预算月份" prop="mouTh"/>  -->
      <el-table-column align="center" label="费用来源" prop="sourceName"/>
      <el-table-column align="center" label="总指标" prop="sunPlanWan"> </el-table-column>
      <el-table-column align="center" label="已审核" prop="plannedWan">
        <!-- <template slot-scope="scope">
          <div style="background:#78BF34  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='0'" >未提交</div>
          <div style="background:#9E71DC  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='1'">战线审核</div>
          <div style="background:#DEA11E  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='2'">经营科审核</div>
          <div style="background:#78BF34  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='3'" >利库审核</div>
          <div style="background:#9E71DC  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='4'">经营科长审核</div>
          <div style="background:#DEA11E  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='5'">驳回</div>
          <div style="background:#78BF34  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='6'" >通过</div>
          <div style="background:#9E71DC  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='7'">废单</div>
        </template> -->
      </el-table-column>
      <el-table-column align="center" label="待审核" prop="toPlanWan">
        <!-- <template slot-scope="scope">
          <div style="background:#78BF34  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='0'" >未提交</div>
          <div style="background:#9E71DC  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='1'">战线审核</div>
          <div style="background:#DEA11E  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='2'">经营科审核</div>
          <div style="background:#78BF34  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='3'" >利库审核</div>
          <div style="background:#9E71DC  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='4'">经营科长审核</div>
          <div style="background:#DEA11E  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='5'">驳回</div>
          <div style="background:#78BF34  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='6'" >通过</div>
          <div style="background:#9E71DC  ;color: white;padding-left:10px;padding-right:10px;display: inline-block" v-show="scope.row.auditSteps=='7'">废单</div>
        </template> -->

      </el-table-column>
      <el-table-column align="center" label="剩余指标" prop="remainingPlanWan"></el-table-column>
    </el-table>
    <!-- <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    /> -->
    <!-- <div>
    <el-table
    border
      :data="listData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :tree-props="{children: 'children',hasChildren: 'hasChildren'}"
    >
      <el-table-column
        v-for="(item,index) in tableList"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        align="center"
      ></el-table-column>
    </el-table>
  </div> -->
  </div>

</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "monthlyBudget.vue",
    data(){
      return{
        cpNameArr:[],
      tableList: [
        {
          label: "单位",
          prop: "depName"
        },
        {
          label: "费用来源",
          prop: "sourceName"
        },
        {
          label: "总指标",
          prop: "sunPlan"
        },
        {
          label: "已审核",
          prop: "planned"
        },
        {
          label: "待审核",
          prop: "toPlan"
        },
        {
          label: "剩余指标",
          prop: "remainingPlan"
        }
      ],
      tableData: [
        {
          children: [
            {
              id: 11,
              depName:'谢谢你',
              sourceName: "第二根半价套餐",
              planned:'123',
              sunPlan: "是兄弟就来割",
              toPlan: "铁手无情",
              remainingPlan: "无痛"
            },
            {
              id: 99,
              depName:'谢谢你',
              sourceName: "第二根半价套餐",
              planned:'123',
              sunPlan: "是兄弟就来割",
              toPlan: "铁手无情",
              remainingPlan: "无痛"
            }
          ],
          id: 1,
         depName: "综采一队汇总",
         sourceName:'汇总',
         remainingPlan:'0',
         sunPlan:'123',
         planned:'123',
         toPlan:'0',
        },
        {
          id: 2,
          depName: "科室",
          children: [
             {
              id: 10,
              name: "第san不要钱",
              alias: "是兄弟就来割",
              operator: "铁手无情",
              state: "无痛"
            }
          ]
        },

        {
          id: 3,
          date: "全院",
          children: [
            {
              id: 31,
              name: "第二根半价套餐",
              alias: "是兄弟就来割",
              operator: "铁手无情",
              state: "无痛"
            },
            {
              id: 41,
              name: "第二根半价套餐",
              alias: "是兄弟就来割",
              operator: "铁手无情",
              state: "无痛"
            }
          ]
        }
      ],
        listData:[],
        total:0,
        selectForm:{
          mouth:'',
          depId:'',
          cpName:'',
          // contractingType:'',
          // pageNum: 1,
          // pageSize: 10,
        },
        shztList:[
          { value: '0',label: '未提交 '},
          { value: '1',label: '战线审核'},
          { value: '2',label: '经营科审核'},
          { value: '3',label: '利库审核'},
          { value: '4',label: '经营科长审核'},
          { value: '5',label: '驳回'},
          { value: '6',label: '通过'},
          { value: '7',label: '废单'},
        ],
        fylbList:[
          {value:1,label:'区队承包'},
          {value:2,label:'集中管控'},
          {value:3,label:'工程承担'},
        ],

        classify:[
        ],
        //默认全部战线
        allZhanxian:{
            deptId:1,
            deptName:'全部战线'
        },
        loading:false,
        // 参数
        canshu: {
          mouth:'',
          depId:''
        }
      }

    },
    created() {
      var myDate = new Date();
      var yue = myDate.getMonth()+1
      if(yue<9){
        yue = '0'+yue
      }
      this.selectForm.mouth =  myDate.getFullYear()+'-'+ yue+'';
      this.getZhanxian()
      this.getFeiyong()

    },
    methods:{
       handleNodeClick(data) {
        console.log(data);
      },
      //默认战线
      getList:function (){
        if(this.selectForm.cpName=='全部'){
          this.selectForm.cpName=''
        }
        this.loading = true;
        request({
          // url: '/material/WzBudgetSchedule/list',
          //  url:'/method/WzTeamBudget/listProgress?mouth=2020-07&depId=101',
          url:'/method/WzTeamBudget/listProgress',
          method: 'get',
          params:this.selectForm
        }).then(response => {
          this.loading = false;
          this.listData = response.data
          this.setPrice()
          console.log(this.listData)
          // this.total = response.total

        });
      },
      //价格/万元
      setPrice () {
         this.listData.forEach(item => {
          item.sunPlanWan = item.sunPlan
          item.sunPlanWan = Number(item.sunPlanWan.replace(/,/g,'')/10000).toFixed(2)+'万元'
          item.toPlanWan = item.toPlan
          item.toPlanWan = Number(item.toPlanWan.replace(/,/g,'')/10000).toFixed(2)+'万元'
          item.remainingPlanWan = item.remainingPlan
          item.remainingPlanWan = Number(item.remainingPlanWan.replace(/,/g,'')/10000).toFixed(2)+'万元'
          item.plannedWan = item.planned
          item.plannedWan = Number(item.plannedWan.replace(/,/g,'')/10000).toFixed(2)+'万元'
        });
      },
      //月份修改
      getListmonth (mouth) {
        this.loading = true
        console.log(mouth)
        this.selectForm.mouth = mouth
        request({
          url: '/method/WzTeamBudget/listProgress',
          method: 'get',
          params:this.selectForm
        }).then(response => {
          this.loading = false;
          this.listData = response.data
          this.setPrice()
          console.log(this.listData)
          // this.total = response.total
        })
        // this.getList(this.selectForm)
      },
      //修改战线
      getListzx (zx) {
        // this.loading = true
        this.selectForm.depId = zx
        // request({
        //   url: '//method/WzTeamBudget/listProgress',
        //   method: 'get',
        //   params:this.selectForm
        // }).then(response => {
        //   this.loading = false;
        //   this.listData = response.data
        //   console.log(this.listData)
        //   // this.total = response.total
        // })
        this.getList()
      },
      //获取战线
      getZhanxian:function(){
        request({
          url: '/system/dept/listFront',
          method: 'get',
        }).then(response => {
          console.log(response.data)
          this.classify = response.data
          this.classify.unshift(this.allZhanxian)
          console.log(this.classify)
          this.selectForm.depId =this.classify[0].deptId
          this.getList();
        });
      },
      getFeiyong:function(){
        request({
          url: '/method/costproject/listCpName',
          method: 'get',
        }).then(response => {
          console.log(response.data)
          this.cpNameArr = response.data
          this.cpNameArr.unshift({
            cpName:'全部'
          })
        });
      },



    }
  }
</script>

<style scoped>

</style>
